<template>
  <PageWrapDrawer :show="show" :isUpdate="props.isUpdate" title-suffix="货物分类"
  @success="onSubmit"
  @on-drawer-close="onClose">
  <Form name="basic"
    :model="insideData.data"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    layout="horizontal"
    style="height: 100%;"
    >
  <Card hoverable :bordered="false" size="small" style="height: auto;">
      <Row>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="分类名称" name="name" v-bind="validateInfos['data.name']">
            <a-input v-model:value="insideData.data.name"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="图标" name="icon">
            <a-input v-model:value="insideData.data.icon">
              <template #suffix>
                <Icon :icon="insideData.data.icon" />
              </template>
              <template #addonAfter>
                <a v-bind:href="iconHref" target="_blank" title="选择图标"><AimOutlined/></a>
              </template>
            </a-input>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="父分类" name="parentId">
            <TreeSelect
              v-model:value="insideData.data.parentId"
              style="width: 100%"
              allow-clear
              tree-default-expand-all
              :fieldNames="{value: 'ID', label: 'name', children: 'children'}"
              :tree-data="treeData"
            >
            </TreeSelect>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="顺序" name="sort">
            <InputNumber v-model:value="insideData.data.sort" :min="0" :max="9999" style="width: 100%"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="启用" name="enable">
            <RadioGroup v-model:value="insideData.data.enable">
              <Radio :value="1">启用</Radio>
              <Radio :value="2">禁用</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="备注" name="memo"
          :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
          :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
          >
            <a-textarea v-model:value="insideData.data.memo" 
            :maxlength="35"
            :autoSize="{minRows: 4}"
            placeholder="描述一下..."/>
          </FormItem>
        </Col>
      </Row>
    </Card>
  </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="goodsDrawer" setup>
import { AimOutlined } from "@ant-design/icons-vue";
import type { TreeSelectProps } from 'ant-design-vue';
import {
Card, Col, Form, FormItem, InputNumber, Radio, RadioGroup, Row, TreeSelect,
} from 'ant-design-vue';
import { computed, reactive, ref, toRaw, watch, watchPostEffect } from 'vue';
import { create, getListData, update } from '/@/api/wms/goods-cate';
import { Icon, } from '/@/components/Icon/index';
import { PageWrapDrawer } from '/@/components/PageWrapDrawer';
import { iconSelect } from '/@/utils/my';

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const insideData = reactive({
  data: {
    ID: null,
    uid: 0,
    name: '',
    icon: '',
    sort: 0,
    parentId: null,
    enable: 1,
    memo: '',
  }
});

const rulesRef = reactive({
  'data.name': [
    {required: true, message: '名称不能为空',},
  ] as unknown,
});
watchPostEffect(async () => {
  let v1 = props.row as any
  if (v1) {
    insideData.data = {...v1}
    if (v1.parentId === 0) insideData.data.parentId = null
  }
})

const treeData = ref<TreeSelectProps['treeData']>([])
watch(()=>props.show, (v1, _) => {
  if (v1) {
    getListData().then(dd => {
      treeData.value = dd
    })
  }
})

const iconHref = computed(() => {
  return iconSelect(insideData.data.icon)
})

const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
  },
});

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    }).catch(err => {
    console.log('error-----', err);
  });
}

const onClose = () => {
  Object.assign(insideData, {data: {}});
  resetFields();
  emit('on-drawer-close');
};

</script>
<style scoped>
</style>
